🛩️Tutorial-06

HTML Media Tutorial :

The First Principle: The Web Needs to Be a Two-Way Street

The fundamental truth is that a website isn't just a brochure for you to read. For the web to be useful, it needs a way to collect information from the user and send it back to the server.

Without this, you couldn't log in, search for a video, buy a product, post a comment, or send a message. The web would be a read-only library.

The Core Problem

How do we create a standardized, reliable system to:

1. Display interactive fields for a user to fill in (text boxes, checkboxes, dropdowns).
2. Package the user's data neatly.
3. Send that package to a specific destination on a server.
4. Tell the server how the data is being sent.

The logical solution to this entire problem is the HTML <form>.

The <input> Element: The Box for Your Stuff

<input type="text">

<form>
    <input type="text">
</form>

The Need for Meaning - The <label>

<label>First Name:</label>
<input type="text">

The Need for Connection - id and for

<label for="firstName">First Name:</label>
<input type="text" id="firstName">

The Need for Submission - The <form> and submit

<form>
    <label for="firstName">First Name:</label>
    <input type="text" id="firstName">

    <br><br>

    <label for="lastName">Last Name:</label>
    <input type="text" id="lastName">

    <br><br>

    <input type="submit">
</form>

The Need for Data Identification - The name Attribute

<input type="text" id="firstName" name="firstName">

Radio Buttons Example

<input type="radio" id="sizeS" name="shirtSize" value="small">
<label for="sizeS">Small</label>

Checkboxes Example

<input type="checkbox" id="toppingPep" name="toppings" value="pepperoni">
<label for="toppingPep">Pepperoni</label>

Button Example

<button type="submit"><strong>Submit</strong> Your Order</button>

Textarea Example

<textarea id="comments" name="comments" rows="4" cols="50"></textarea>

Dropdown Example

<select id="country" name="country">
    <option value="">--Please choose an option--</option>
    <option value="in">India</option>
</select>

HTML Media

First Principle: The Web is More Than Text and Images

The fundamental truth is that a webpage should be able to deliver any kind of content, not just static text and pictures.

HTML5 Video Tag Example

<video src="my-awesome-video.mp4" controls></video>

Audio Tag Example

<audio src="audio/theme-song.mp3" controls></audio>

HTML Symbols Example

<footer>
    <p>Copyright &copy; 2024 My Awesome Website. All Rights Reserved.</p>
</footer>